{% extends "base.html" %}
{% load staticfiles %}

{% block title %}用户管理{% endblock %}

{% block styles %}
    <style>
        .fixed-table-body {
            height: 70% !important;
        }
    </style>

{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            用户管理
            <small>{{ allHtml.title }}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>Rbac</a></li>
            <li class="active">用户管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-icons" data-toggle="tab">用户列表</a></li>
                    </ul>

                    <div class="tab-content ">
                        <div class="tab-pane active mailbox-messages" id="fa-icons">
                            <div class=" mailbox-messages">
                                <table class="table table-bordered table-striped table-hover" id="userTable">

                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="glyphicons">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- UserModal content -->
    {#    用户新增和修改#}
    <div class="modal fade" id="modal_backtest_detail" data-backdrop="static">
        <div class="modal-dialog" style="width: 450px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="padding: 30px;height:auto">
                    <form>
                        <div style="margin-top:3%"><label>用户代码</label><input class="opts form-control" id="customerid"
                                                                             name="customerid" type="text"
                                                                             placeholder="用户代码"></div>
                        <div style="margin-top:3%"><label>用户名称</label><input class="opts form-control" id="customername"
                                                                             name="customername" type="text"
                                                                             placeholder="用户名称"></div>
                        <div style="margin-top:3%; display: block"><label>密码</label><input class="opts form-control"
                                                                                           id="password"
                                                                                           name="password" type="text"
                                                                                           placeholder="密码"></div>
                        <div style="margin-top:3%; display: block"><input class="opts" id="ismd5"
                                                                          name="ismd5" type="checkbox">已加密
                        </div>
                        <div style="margin-top:3%; display: block"><label>确认密码</label><input class="opts form-control"
                                                                                             id="confirmpwd"
                                                                                             name="confirmpwd"
                                                                                             type="text"
                                                                                             placeholder="确认密码"></div>
                        <div style="margin-top:3%;display: none"><label>是否活跃</label>
                            <select class="opts form-control" id="isactive" name="isactive">
                                <option name="isactive" value="否">
                                    否
                                </option>
                                <option name="isactive" value="是">
                                    是
                                </option>
                            </select>
                        </div>
                        <div style="margin-top:3%"><label>最大登录次数</label><input class="opts form-control" id="maxlogined"
                                                                               name="maxlogined"
                                                                               type="text" placeholder="最大登录次数"></div>
                        <div style="margin-top:3%">
                            <span style="margin-left:10%;cursor:pointer;padding:5px" class="btn-primary"
                                  onclick="sub(gets)">提交</span>
                            <span style="margin-left:60%;cursor:pointer;padding:5px" class="btn-success"
                                  onclick="quit__()">取消</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {#    用户删除#}
    <div class="modal fade" id="modal_delete" data-backdrop="static">
        <div class="modal-dialog" style="width: 300px;background-color:#eee">
            <div class="modal-content">
                <div class="modal-body" style="padding:5px;height:80px;overflow:auto">
                    <div>
                        <p style="margin-top:10px;margin-left:5px;">是否确定删除用户</p>
                        <div>
                            <span id="del" sid="" onclick="quit__()"
                                  style="padding:2px;cursor:pointer;float:right;margin-right:10px" class="btn-success">取消</span>
                            <span onclick="del_()" style="padding:2px;cursor:pointer;float:right;margin-right:10px"
                                  class="btn-primary">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {#    重置密码#}
    <div class="modal fade" id="modal_inipwd" data-backdrop="static">
        <div class="modal-dialog" style="width: 450px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">重置密码</h4>
                </div>
                <div class="modal-body" style="padding: 30px;height:auto">
                    <form>
                        <div style="margin-top:3%;"><label>新密码</label><input class="opts form-control"
                                                                             id="newpwd"
                                                                             name="newpwd" type="password"
                                                                             placeholder="新密码"></div>
                        <div style="margin-top:3%;"><input class="opts" id="ismd5new"
                                                           name="ismd5new" type="checkbox">已加密
                        </div>
                        <div style="margin-top:3%;"><label>确认密码</label><input class="opts form-control"
                                                                              id="newcfpwd"
                                                                              name="newcfpwd"
                                                                              type="password"
                                                                              placeholder="确认密码"></div>
                        <div style="margin-top:3%">
                            <span style="margin-left:10%;cursor:pointer;padding:5px" id="pwdnew" class="btn-primary"
                                  onclick="pwdcz()">提交</span>
                            <span style="margin-left:60%;cursor:pointer;padding:5px" class="btn-success"
                                  onclick="quit__()">取消</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}

    <script type="text/javascript">

        function gets() {
            data = {
                'customerid': JSON.stringify([$('#customerid').val()]),
                'customername': JSON.stringify([$('#customername').val()]),
                'password': JSON.stringify([$('#password').val()]),
                'ismd5': JSON.stringify([$("#ismd5").is(':checked')]),
                'confirmpwd': JSON.stringify([$('#confirmpwd').val()]),
                'isactive': JSON.stringify([$('#isactive').val()]),
                'maxlogined': JSON.stringify([$('#maxlogined').val()]),
                {#'roles': JSON.stringify([$('#roles').val()]),#}
                {#'sum': '1'#}
            }
            return data;
        }


        function sub(func) {
            data = func();
            //对提交的数据进行遍历，json解析成数组取第一个值，然后取Bool值，
            // 如果是false(空)，则alert，并且返回空，不继续执行下面代码
            for (let key in data) {
                var item = JSON.parse(data[key])[0]
                if (Boolean(item) == false
                    && key != 'ismd5'
                    && $("#" + key).parent().css("display") === 'block') {
                    var title = $("#" + key).prev().text()
                    alert(title + "不能为空!")
                    return
                }
            }
            $.post("{% url 'Rbac:user_modify' %}", data, function (r) {
                if (r === 'y') {
                    window.location.reload();
                } else {
                    alert(r)
                }

            });
        }

        function modify(id) {
            $('.modal-title').text('修改');
            $("#customerid").attr("readonly", "readonly");
            $("#ismd5").parent().css('display', "none")
            $("#password").parent().css('display', "none")
            $("#confirmpwd").parent().css('display', "none")
            $("#isactive").parent().css('display', "none")
            $.get("{% url 'Rbac:user_modify' %}", {'customerid': id}, function (r) {
                if (r) {
                    for (var key in r) {
                        if ($('#' + key)) {
                            $('#' + key).val(r[key]);
                        }
                    }
                }
            });
        };

        function create() {
            $('.modal-title').text('新建');
            $('.opts').val("");
            $("#customerid").removeAttr("readonly", "readonly");
            $("#ismd5").removeAttr("checked", "checked")
            $("#ismd5").parent().css('display', "block")
            $("#password").parent().css('display', "block")
            $("#confirmpwd").parent().css('display', "block")
            $("#isactive").val("是")
            $("#isactive").parent().css('display', "block")
        };

        function quit__() {
            $('#modal_backtest_detail').modal('hide');
            $('#modal_delete').modal('hide');
            $("#modal_inipwd").modal('hide')
        }

        function _delete(d) {
            $('#modal_delete').modal('show');
            $('#del').attr('sid', d);
        }

        function del_() {
            d = $('#del').attr('sid');//该值是从js动态渲染删除里面拿到的，先_delete，再del_
            $.post("{% url 'Rbac:user_modify' %}", {'id': d, 'delete': 1}, function (r) {
                if (r == "y") {
                    window.location.href = "{% url 'Rbac:userList' %}";
                } else {
                    //返回空，则说明当前用户无该操作权限。
                    $('#myModal').modal('show');
                    alert(r);
                    $('#modal_delete').modal('hide');
                }
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
        };


        //激活或者禁止
        function _deactive(de) {
            $.post("{% url 'Rbac:activestatus' %}", {"id": de}, function (r) {
                if (r == 'y') {
                    window.location.reload();
                } else {
                    alert(r)
                }
            });
        }

        //重置密码模态框
        function _initpwd(d) {
            $("#modal_inipwd").modal('show')
            $("#pwdnew").attr('pwdid', d)
        }

        //重置密码
        function pwdcz() {
            var cusid = $("#pwdnew").attr("pwdid")
            var npwd = $("#newpwd").val()
            var ismd5 = $("#ismd5new").is(':checked')
            var cnpwd = $("#newcfpwd").val()
            if (npwd !== cnpwd) {
                alert("两次密码输入不一致！")
            } else {
                $.post("{% url 'Rbac:inipwd' %}", {"id": cusid, "ismd5": ismd5, "npwd": npwd}, function (r) {
                    if (r == "y") {
                        window.location.reload()
                    } else {
                        alert(r)
                    }
                })
            }
        }


        function InitBootstrapTable(my_url, my_table_id, my_columns, my_filename) {
            $('#' + my_table_id).bootstrapTable('destroy').bootstrapTable({
                url: my_url,
                method: 'get',
                columns: my_columns,
                toolbar: '#toolbar',
                striped: true,
                cache: false,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                queryParams: function (pageRequest) {
                    return pageRequest;
                },
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                search: true,      //这里的search是bootstrap内置的查询方法，同时可以发给后台做判断  
                strictSearch: false,
                showColumns: true,
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                uniqueId: "_id",
                showToggle: true,
                cardView: false,
                detailView: false,
                //showExport: true,
                buttonsAlign: "right",
                exportDataType: "all",
                exportTypes: ['excel'],
                Icons: 'glyphicon-export',
                exportOptions: {
                    fileName: my_filename,
                },
            })
        };
        my_columns = [
            {field: "customerid", title: "用户代码"},
            {title: "用户名称", field: "customername"},
            {title: "最大登录次数", field: "maxlogined"},
            {title: "是否活跃", field: "isactive"},
            {
                title: "创建时间",
                field: "createtime",
            },
            {
                title: "更新时间",
                field: "updatetime",
            },
            {
                title: "操作",
                field: 'option',
                formatter: function (value, row, index) {
                    if (row.isactive == "否") {
                        var acbutton = "激活"
                        var classname = 'btn btn-xs btn-flat btn_operation btn-success'
                    } else if (row.isactive == "是") {
                        var acbutton = "禁用"
                        var classname = 'btn btn-xs btn-flat btn_operation btn-danger'
                    }
                    return "<span onclick=\"modify('" + value + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_backtest_detail'> <i class='fa fa-pencil'></i>修改</span> " +
                        "&nbsp<span onclick=\"_delete('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>删除</span> " +
                        "&nbsp<span onclick=\"_deactive('" + value + "')\" type='button' class='" + classname + "'>" + "<i class='fa fa-pencil'></i>" + acbutton + "</span> " +
                        "&nbsp<span onclick=\"_initpwd('" + value + "')\" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>重置密码</span> ";
                }
            }
        ];
        InitBootstrapTable("{% url 'Rbac:userList' %}", "userTable", my_columns, "userlist");
        $('.fixed-table-toolbar').append("&nbsp <span onclick='create()' type='button' class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_backtest_detail'> <i class='fa fa-pencil'></i>新建</span>");

        $('.page-list').css('display', 'none');
        $('.pagination-info').css('display', 'none');
        $('*[placeholder="Search"]').attr('placeholder', '请输入用户名');
    </script>




{% endblock %}